<template>
  <div class="my-app-demo">
    <MenuList></MenuList>
    <Router class="container" :router="routerConfig"></Router>
  </div>
</template>
<script lang="ts">
import MenuList from './components/Menu.vue';
import Router from './components/Router.vue';
import routerConfig from './router';
import { createHashHistory } from 'history';
const history = createHashHistory();
export default {
  name: 'index',
  components: {
    MenuList,
    Router,
  },
  data: () => {
    return {
      routerConfig,
    };
  },
  provide: {
    history,
    publicPath: '/demo',
  },
};
</script>
<style lang="scss" scoped>
.my-app-demo {
  display: flex;
  height: 100vh;
  width: 100vw;
  max-width: 100vw;
  max-height: 100vh;
  .container {
    flex: 1;
  }
}
</style>
